<template>
  <el-card class="login-logs">
    <template #header>
      <div class="card-header">
        <h3>登录记录</h3>
        <el-button @click="$emit('refresh')" :loading="loginLogsLoading">
          <el-icon><Refresh /></el-icon>刷新
        </el-button>
      </div>
    </template>

    <div class="recent-logins">
      <div class="login-info">
        <h4>最近登录信息</h4>
        <div class="login-details">
          <div class="login-item">
            <span class="label">登录时间：</span>
            <span>{{ securitySettings.lastLoginTime || '暂无记录' }}</span>
          </div>
          <div class="login-item">
            <span class="label">登录IP：</span>
            <span>{{ securitySettings.lastLoginIp || '未知' }}</span>
          </div>
          <div class="login-item">
            <span class="label">登录设备：</span>
            <span>{{ securitySettings.lastLoginDevice || '未知' }}</span>
          </div>
        </div>
      </div>

      <div class="login-history" v-if="loginLogs.length > 0">
        <h4>历史登录记录</h4>
        <el-table :data="loginLogs" style="width: 100%">
          <el-table-column prop="loginTime" label="登录时间" width="180" />
          <el-table-column prop="loginIp" label="登录IP" width="150" />
          <el-table-column prop="loginDevice" label="设备信息" />
          <el-table-column prop="loginLocation" label="登录地点" width="120" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        
        <el-pagination
          v-if="loginLogsPagination.total > loginLogsPagination.pageSize"
          :current-page="loginLogsPagination.page"
          :page-size="loginLogsPagination.pageSize"
          :total="loginLogsPagination.total"
          @current-change="$emit('page-change', $event)"
          layout="prev, pager, next"
          class="pagination"
        />
      </div>
      
      <el-empty v-else description="暂无登录记录" />
    </div>
  </el-card>
</template>

<script setup>
import { Refresh } from '@element-plus/icons-vue';

// Props定义
defineProps({
  securitySettings: {
    type: Object,
    default: () => ({})
  },
  loginLogs: {
    type: Array,
    default: () => []
  },
  loginLogsLoading: {
    type: Boolean,
    default: false
  },
  loginLogsPagination: {
    type: Object,
    default: () => ({})
  }
});

// Events定义
defineEmits(['refresh', 'page-change']);
</script>

<style scoped>
.login-logs {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.recent-logins {
  padding: 20px 0;
}

.login-info {
  margin-bottom: 30px;
}

.login-info h4,
.login-history h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.login-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.login-item {
  padding: 12px;
  background-color: #F5F7FA;
  border-radius: 6px;
}

.login-item .label {
  font-weight: 600;
  color: #606266;
  margin-right: 8px;
}

.login-history {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-details {
    grid-template-columns: 1fr;
  }
}
</style>
